<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>用户注册</title>
    <!-- <link href="lib/css/meterial-icons.css" rel="stylesheet"> -->
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
    
    <style type="text/css">
      [v-cloak] { display: none }
      .bdl-secondary-3 { border-left: 3px solid #26a69a }
      div.q-if-inner div.q-input-target {line-height: 24px}  /* 兼容 ie 的 */
    </style>
  </head>
  <body>
    <div id="q-register" v-cloak class="row">
      <q-stepper class="no-shadow" v-model="currentStep" ref="supplierInviteStepper" color="primary" contractable style="width:100%;min-height:650px">
        <q-step name="register" title="用户注册" class="row justify-center">
          <q-card class="bg-white q-mt-md" style="width: 400px">
            <q-card-main class="gutter-y-xs">
              <q-card-media>
                <img style="width: 190px; height: 50px;margin: 0 auto" src="../static/img/120.png">
              </q-card-media>
              <q-field 
                :error="$v.registerForm.companyName.$error"
                error-label="企业名称不能为空">
                <q-input
                  :float-label="$t('企业名称')"
                  @blur="$v.registerForm.companyName.$touch"
                  v-model.trim="registerForm.companyName"></q-input>
              </q-field>
              <q-field 
                helper="需要验证该邮箱属于您。"
                :error="$v.registerForm.email.$error"
                :error-label="$v.registerForm.email.email ? '电子邮箱不能为空！': '请填写正确的邮箱格式！'">
                <q-input
                  :float-label="$t('电子邮箱')"
                  @blur="$v.registerForm.email.$touch"
                  v-model.trim="registerForm.email"></q-input>
              </q-field>
              <div class="row gutter-x-sm">
                <q-field 
                  class="col-8"
                  :error="$v.registerForm.valiCode.$error"
                  error-label="验证码不能为空">
                  <q-input
                    :float-label="$t('验证码')"
                    @blur="$v.registerForm.valiCode.$touch"
                    v-model.trim="registerForm.valiCode"></q-input>
                </q-field>
                <div class="col-4 q-mt-sm">
                  <q-btn 
                    class="full-width" 
                    color="secondary" 
                    size="sm"
                    no-caps	
                    :loading="btnLoading"
                    @click="getValiCode">
                    获取验证码
                    <span slot="loading">{{ btnText }}</span>
                  </q-btn>
                </div>
              </div>
              <q-field 
                :error="$v.registerForm.password.$error"
                helper="使用 6 个或更多字符（字母、数字和符号的组合）"
                :error-label="$v.registerForm.password.minLength ? ($v.registerForm.password.require ? '': '账号密码不能为空'): '账号密码不能少于6位'">
                <q-input
                  :float-label="$t('账户密码')"
                  type="password"
                  @blur="$v.registerForm.password.$touch"
                  v-model.trim="registerForm.password"></q-input>
              </q-field>
              <q-field v-if="registerForm.type == 1">
                <q-input
                  :float-label="$t('邀请码')"
                  v-model.trim="registerForm.invitationCode"></q-input>
              </q-field>
              <q-btn 
                class="full-width q-mt-md" 
                color="primary" 
                :loading="registerBtnLoading"
                @click="registerSubmit">下一步</q-btn>
              <q-btn 
                class="full-width q-mt-sm" 
                outline
                @click="goLogin"
                color="primary">返回登录</q-btn>
            </q-card-main>
          </q-card>
        </q-step>
        <q-step name="writeBaseInfo" title="填写基本信息" >

        </q-step>
        <q-step name="regsiterResult" title="注册结果">
            
        </q-step>
      </q-stepper>
      <div style="width: 100%;text-align:center;font-size:13px;color:#666666">QIANTU MOTOR © 2018苏ICP备17008683号-1苏公网安备 32050502000382号</div>
    </div>
    
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- babel for es6 transform -->
    <!-- <script src="lib/js/babel.min.js"></script> -->
    <!-- vue validate -->
    <script src="../lib/js/vuelidate.min.js"></script>
    <script src="../lib/js/validators.min.js"></script>
    <!-- consts ps: always leave this file first -->
    <script src="../script/consts.js"></script>
    <!-- status code -->
    <script src="../script/status.code.js"></script>
    <!-- qs for axios -->
    <script src="../lib/js/qs.min.js"></script>
    <!-- axios for http request -->
    <script src="../lib/js/axios.js"></script>
    <!-- axios.instance must be after axios -->
    <script src="../script/axios.instance.js"></script>
    <!-- quasar i18n zh-hans -->
    <script src="../lib/lang/zh-hans.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <!-- current page international file -->
    <script src="../lang/sop/register.js"></script>
    <!--  -->
    <script src="../script/utils.js"></script>

    <script>
      // quasar components use
      Quasar.i18n.set(Quasar.i18n[LANGUGE])

      Vue.use(window.vuelidate.default)
      var minLength = window.validators.minLength
      var required = window.validators.required
      var email = window.validators.email

      var register = new Vue({
        el: '#q-register',
        i18n: i18n,
        data: function () {
          return {
            currentStep: 'register',
            registerForm: {
              companyName: '',
              email: '',
              name: '',
              password: '',
              type: 2,
              accountType: 1,
              invitationCode: ''
            },
            btnText: '重新发送 60 s',
            btnLoading: false,
            registerBtnLoading: false
          }
        },
        validations: {
          registerForm: {
              email: { required: required, email: email },
              companyName: { required: required },
              password: { required: required, minLength: minLength(6) },
              valiCode: { required: required }
            }
        },
        computed: {
         
        },
        created: function () {
          var _code = GetRequest()
          
          if (_code.invitationCode == undefined || _code.invitationCode == '' || _code.invitationCode == null) {
            this.registerForm.type = 2
          } else {
            this.registerForm.invitationCode = _code.invitationCode
            this.registerForm.type = 1
          }
        },
        watch: {
          
        },
        methods: {
          getValiCode: function() {
            this.$v.registerForm.email.$touch()
            if (!this.$v.registerForm.email.$error) {
              this.btnLoading = true
              var count = 60
              var that = this
              var interval = setInterval(function() {
                if (count > 0) {
                  count--
                  that.btnText = '重新发送 ' + count + ' s'
                } else {
                  that.btnLoading = false
                  that.btnText = '重新发送 60 s'
                  clearInterval(interval)
                }
              }, 1000) 
              axios({
                method: 'post',
                url: '/public/new/tool/sendVerificationCode',
                data: {
                  code: 'codeStringOne',
                  sendEmail: this.registerForm.email
                }
              })
              .then(function(data) {
                if (data.statusCode == 200) {
                  that.$q.notify({
                    message: that.$t('邮件已发送到您的邮箱'),
                    icon: 'done',
                    type: 'positive',
                    position: 'top-right'
                  })
                } else {
                  that.$q.notify({
                    message: that.$t(STATUS_CODE[data.statusCode]),
                    icon: 'error_outline',
                    type: 'negative',
                    position: 'top-right'
                  })
                }
              })
              .catch(function(err) {

              })
            }
          },
          registerSubmit: function() {
            var that = this
            this.$v.registerForm.$touch()
            if (!this.$v.registerForm.$error) {
              this.registerBtnLoading = true
              axios({
                method: 'post',
                url: '/public/new/register',
                data: {
                  vendorName: this.registerForm.companyName.trim(),
                  registerAccount: this.registerForm.email.trim(),
                  registerPassword: this.registerForm.password.trim(),
                  verificationCode: this.registerForm.valiCode.trim(),
                  type: this.registerForm.type,
                  accountType: this.registerForm.accountType,
                  invitationCode: this.registerForm.invitationCode.trim()
                }
              })
              .then(function(data) {
                if (data.statusCode == 200) {
                  that.$q.notify({
                    message: that.$t('注册成功'),
                    icon: 'done',
                    type: 'positive',
                    position: 'top-right'
                  })
                  // that.$q.sessionStorage.set('TOKEN', data.TOKENCODE)
                  window.location.href = 'registerWriteBaseInfo.html?userToken=' + data.TOKENCODE
                } else {
                  that.$q.notify({
                    message: that.$t(STATUS_CODE[data.statusCode]),
                    icon: 'error_outline',
                    type: 'negative',
                    position: 'top-right'
                  })
                }
                that.registerBtnLoading = false
              })
              .catch(function(err) {

              })
            }
          },
          goLogin: function() {
            window.location.href = baseURL + '/public/login'
          }
        }
      })
    </script>
  </body>
</html>